<template>
	<view class="content">
		<tpf-time-range
			ref="time"
			:startTime="startTime"
			:startDefaultTime="startDefaultTime"
			:endTime="endTime"
			:endDefaultTime="endDefaultTime"
			@timeRange="timeRange"
		></tpf-time-range>
		<view class="card">
			<text class="select_title">上传点位信息</text>
			<view class="forms-box">
				<uni-forms ref="baseForm" :modelValue="getLocationList" labelWidth="100px">
					<uni-forms-item label="点位名称" required>
						<uni-easyinput v-model="getLocationList.locationName" placeholder="请输入点位名称" />
					</uni-forms-item>
					<uni-forms-item label="点位类型" required>
						<uni-data-select v-model="getLocationList.locationTypeId" :localdata="range" @change="type_select" />
					</uni-forms-item>
					<uni-forms-item label="门票价格" required>
						<uni-easyinput v-model="getLocationList.ticketPrice" placeholder="请输入门票价格" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required>
						<uni-easyinput v-model="getLocationList.phone" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="地址">
						<uni-easyinput v-model="getLocationList.address" placeholder="请输入地址" />
					</uni-forms-item>
					<uni-forms-item label="VR链接">
						<uni-easyinput v-model="getLocationList.vrView" placeholder="请输入VR链接" />
					</uni-forms-item>
					<view class="break-item">
						<uni-forms-item label="简介">
							<uni-easyinput type="textarea" v-model="getLocationList.introduction" placeholder="请输入简介"></uni-easyinput>
						</uni-forms-item>
					</view>
				</uni-forms>
				<!-- <view class="select_type">
					<view class="title">企业名称:</view>
					<uni-data-select v-model="value1" :localdata="companyNameList" @change="company_select"></uni-data-select>
				</view>
				<van-field2
					label="点位名称:"
					:value="getLocationList.locationName"
					placeholder="输入点位名称"
					:border="false"
					@change="getLocationList.locationName = $event.mp.detail"
				/>
				<view class="select_type">
					<view class="title">点位类型:</view>
					<uni-data-select v-model="value" :localdata="range" @change="type_select"></uni-data-select>
				</view>
				<van-field2
					label="门票价格:"
					:value="getLocationList.ticketPrice"
					placeholder="输入门票价格"
					:border="false"
					@change="getLocationList.ticketPrice = $event.mp.detail"
				/>
				<van-field2 label="联系方式:" :value="getLocationList.phone" placeholder="输入联系方式" :border="false" @change="getLocationList.phone = $event.mp.detail" />
				<van-field2 label="地址:" :value="getLocationList.address" placeholder="输入地址" :border="false" @change="getLocationList.address = $event.mp.detail" />
				<van-field2 label="VR链接:" :value="getLocationList.vrView" placeholder="输入VR链接" :border="false" @change="getLocationList.vrView = $event.mp.detail" /> -->
				<!-- <view style="width: 100vw">
					<uni-section title="简介" type="line" padding>
						<uni-easyinput type="textarea" v-model="getLocationList.introduction" placeholder="请输入简介"></uni-easyinput>
					</uni-section>
				</view> -->
			</view>
		</view>
		<view class="card">
			<text class="select_title">营业时间</text>
			<view @click="show_time_range" class="select_box2">
				<view class="timeStart">
					{{ getLocationList.openTime || '开始时间' }}
				</view>
				<view class="fuo">——</view>
				<view class="timeEnd">
					{{ getLocationList.closeTime || '结束时间' }}
				</view>
			</view>
		</view>
		<view class="card">
			<text class="select_title">应用轮播图</text>
			<view class="select_box3">
				<van-uploader
					style="margin: 20rpx; margin-top: 40rpx"
					preview-full-image
					multiple
					:file-list="fileList"
					accept="image"
					use-before-read
					@delete="deletImage"
					@beforeRead="beforeRead"
				/>
			</view>
		</view>
		<view class="card">
			<text class="select_title">上传音频</text>
			<view class="select_box3">
				<van-uploader
					max-count="1"
					style="margin: 20rpx; margin-top: 40rpx"
					:file-list="fileListMedia"
					accept="file"
					use-before-read
					@delete="deletMedia"
					@beforeRead="beforeReadMedia"
				/>
			</view>
		</view>
		<view class="card">
			<text class="select_title">上传视频</text>
			<view class="select_box3">
				<van-uploader
					max-count="1"
					style="margin: 20rpx; margin-top: 40rpx"
					:file-list="fileListVideo"
					accept="video"
					use-before-read
					@delete="deletVideo"
					@beforeRead="beforeReadVideo"
				/>
			</view>
		</view>
		<view class="card margin-top">
			<text class="select_title">特色管理</text>
			<view v-for="(i, index) in getLocationList.featurePics" :key="index" class="select_box4">
				<uni-easyinput trim="all" v-model="i.feature.title" placeholder="请输入特色标题"></uni-easyinput>
				<view class="box4_img">
					<view v-for="(v, index2) in i.pics" :key="index2" class="img_item">
						<van-field :value="v.remark" placeholder="图片备注" :border="false" @change="remarkChange(v, $event)" />
						<van-uploader
							max-count="1"
							style="margin: 20rpx; margin-top: 40rpx"
							preview-full-image
							:file-list="v.url"
							accept="image"
							use-before-read
							@delete="deletImagefeature(i, v, $event)"
							@beforeRead="beforeReadfeature(v, $event)"
						/>
					</view>
					<van-button @click="addFeature(i)" icon="plus" round type="info"></van-button>
				</view>
			</view>
			<view class="margin">
				<van-button @click="addFeatureP" icon="plus" type="info" block>新增</van-button>
			</view>
		</view>
		<view style="height: 200rpx; background-color: #efefef" />
		<view class="select_yes">
			<view @click.stop="restSearch" class="select_rest">重置</view>
			<view @click.stop="submit" style="width: 50%; line-height: 100%; text-align: center">确定</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
// import tpfTimeRange from '@/components/tpf-time-range/tpf-time-range.vue';
import { pageLocationType, uploadFile, saveOrUpdateLocationType, pageEnterprise } from '@/api/system/locationType.js';

export default {
	// components: {
	// 	tpfTimeRange
	// },
	data() {
		return {
			fileList: [],
			fileListVideo: [],
			startTime: '00:00',
			startDefaultTime: '06:00',
			endTime: '24:00',
			endDefaultTime: '06:00',
			value: 0,
			value1: 0,
			range: [],
			companyNameList: [],
			rangeShow: false,
			Selection: {
				border: '1rpx solid deepskyblue',
				color: 'deepskyblue',
				background: ''
			},
			params: {
				size: 99,
				pageNum: 1,
				current: 1
			},
			lctShow: false,
			fileListMedia: [],
			getLocationList: {
				longitude: '',
				latitude: '',
				client:'app',
				featurePics:[],
				pics:[],
			}
		};
	},
	mounted() {
		pageLocationType(this.params).then((res) => {
			this.range = res.data.records.map((item) => {
				return {
					value: item.id,
					text: item.name
				};
			});
		});
		pageEnterprise(this.params).then((res) => {
			this.companyNameList = res.data.records.map((item) => {
				return {
					value: item.id,
					text: item.name
				};
			});
		});
		this.getMyLocation();
	},
	methods: {
		lick1(e) {
			console.log(e);
		},
		timeRange(e) {
			this.getLocationList.openTime = e[0];
			this.getLocationList.closeTime = e[1];
		},
		show_time_range() {
			this.$refs.time.open();
		},
		type_select(val) {
			console.log('selectedType:', val);
			// this.getLocationList.locationTypeId = val;
			this.range.map(item => {
				if(item.value == val) {
					this.getLocationList.typeName = item.text;
				}
			})
			// this.getLocationList.typeName = '';
		},
		company_select(val) {
			this.getLocationList.enterpriseId = val;
		},
		beforeRead(e) {
			console.log(e.detail.file);
			this.fileList.push(e.detail.file[0]);
			let params = {
				filePath: e.detail.file[0].tempFilePath
			};
			uni.showToast({
				icon: 'loading',
				title: '上传中'
			});
			uploadFile(params).then((res) => {
				if (res.code == 200) {
					this.getLocationList.pics.push({
						objKey: res.data[0],
						mapKey: e.detail.file[0].tempFilePath
					});
					uni.hideLoading();
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
					uni.hideLoading();
				}
			});
		},
		deletImage(e) {
			this.fileList.remove(e.detail.file);
			this.getLocationList.pics.remove({
				mapKey: e.detail.file.tempFilePath
			});
			this.$forceUpdate();
		},
		beforeReadMedia(e) {
			if (e.detail.file.url.endsWith('.mp3') || e.detail.file.url.endsWith('.wav') || e.detail.file.url.endsWith('.ogg')) {
				uni.showToast({
					icon: 'loading',
					title: '上传中'
				});
				this.fileListMedia.push({
					url: e.detail.file.url
				});
				let params = {
					filePath: e.detail.file.url
				};
				uploadFile(params).then((res) => {
					if (res.code == 200) {
						this.getLocationList.voiceKey = res.data[0];
						uni.hideLoading();
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						});
						uni.hideLoading();
					}
				});
			} else {
				uni.showToast({
					icon: 'error',
					title: '这不是一个音频文件'
				});
			}
		},
		deletMedia(e) {
			this.fileListMedia.voiceKey = '';
			this.fileListMedia = [];
			this.$forceUpdate();
		},
		beforeReadVideo(e) {
			console.log(e);
			uni.showToast({
				icon: 'loading',
				title: '上传中'
			});
			this.fileListVideo.push({
				url: e.detail.file.url
			});
			let params = {
				filePath: e.detail.file.url
			};
			uploadFile(params).then((res) => {
				if (res.code == 200) {
					this.getLocationList.videoKey = res.data[0];
					uni.hideLoading();
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
					uni.hideLoading();
				}
			});
		},
		deletVideo(e) {
			this.fileListVideo.videoKey = '';
			this.fileListVideo = [];
			this.$forceUpdate();
		},
		addFeatureP() {
			this.getLocationList.featurePics.push({
				feature: {
					featureId: Math.random(),
					title: '',
					remark: ''
				},
				pics: [
					{
						remark: '',
						objKey: '',
						url: []
					}
				]
			});
		},
		addFeature(i) {
			i.pics.push({
				remark: '',
				objKey: '',
				url: []
			});
			console.log(this.getLocationList.featurePics);
		},
		beforeReadfeature(v, e) {
			v.url.push({
				url: e.detail.file.tempFilePath
			});
			uni.showToast({
				icon: 'loading',
				title: '上传中'
			});
			let params = {
				filePath: e.detail.file.url
			};
			uploadFile(params).then((res) => {
				if (res.code == 200) {
					v.objKey = res.data[0];
					uni.hideLoading();
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
					uni.hideLoading();
				}
			});
			console.log(this.getLocationList);
		},
		deletImagefeature(i, v, e) {
			i.pics.remove(v);
			this.$forceUpdate();
			console.log(this.getLocationList);
		},
		remarkChange(v, $event) {
			console.log(v, $event);
			v.remark = $event.mp.detail;
		},
		restSearch() {
			this.$store.commit('RESTLIST');
			this.value = null;
			this.value1 = null;
			this.fileList = [];
			this.fileListMedia = [];
			this.fileListVideo = [];
		},
		getMyLocation() {
			let that = this;
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function (res) {
					console.log('坐标：', res.longitude, res.latitude);
					that.getLocationList.longitude = res.longitude;
					that.getLocationList.latitude = res.latitude;
				}
			});
		},
		submit() {
			console.log('para:', this.getLocationList);
			saveOrUpdateLocationType(this.getLocationList).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
					this.$store.commit('RESTLIST');
					this.value = null;
					this.value1 = null;
					this.fileList = [];
					this.fileListMedia = [];
					this.fileListVideo = [];
					this.lctShow = false;
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
				}
			});
		},
		close(e) {
			this.lctShow = false;
			this.$emit('close');
		}
	},
	// computed: {
	// 	$show() {
	// 		return this.$props.show;
	// 	},
	// 	...mapGetters(['getLocationList'])
	// },
	// watch: {
	// 	$show() {
	// 		this.lctShow = true;
	// 	}
	// }
};
</script>

<style lang="scss">
.card {
	margin: 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	.select_title {
		font-size: 30rpx;
		margin-left: 20rpx;
		font-weight: 700;
		color: #2280f5;
	}

	.uni-easyinput__content-input {
		font-size: 28rpx;
	}

	.uni-easyinput__placeholder-class,
	.placeholder {
		font-size: 28rpx;
		color: #d8d8d8;
	}
}

// .select_box {
// 	display: grid;
// 	grid-template-rows: repeat(auto, 1fr);
// 	grid-gap: 11rpx 5;
// 	justify-items: start;
// 	align-items: center;
// 	.select_type {
// 		display: flex;
// 		align-items: center;

// 		.title {
// 			width: 206rpx;
// 			color: #646566;
// 			text-align: right;
// 			font-size: 28rpx;
// 			margin-right: 22rpx;
// 		}
// 	}

// 	.select_item {
// 		width: 172rpx;
// 		text-align: center;
// 		padding: 12rpx;
// 		border-radius: 12rpx;
// 		font-size: 24rpx;
// 		background-color: #dcd9d94a;
// 	}
// }

.select_box2 {
	display: flex;
	justify-content: space-around;
	padding: 0 20rpx;

	.timeStart,
	.timeEnd {
		width: 35%;
		background-color: #eaeaeac2;
		padding: 10rpx;
		border-radius: 39rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: #6d6d6d;
	}

	.fuo {
		color: #b7b6b6;
		display: flex;
		align-items: center;
		position: relative;
		top: 5rpx;
	}
}

// /deep/ ::-webkit-scrollbar {
// 	/*滚动条整体样式*/
// 	width: 4px !important;
// 	height: 1px !important;
// 	overflow: auto !important;
// 	background: #ccc !important;
// 	-webkit-appearance: auto !important;
// 	display: block;
// }

// /deep/ ::-webkit-scrollbar-thumb {
// 	/*滚动条里面小方块*/
// 	border-radius: 10px !important;
// 	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// 	background: #7b7979 !important;
// }

// /deep/ ::-webkit-scrollbar-track {
// 	/*滚动条里面轨道*/
// 	// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// 	// border-radius: 10px !important;
// 	background: #ffffff !important;
// }

.select_box3 {
	display: flex;
	justify-content: flex-start;
}

.select_box4 {
	padding: 20rpx;

	.box4_img {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		align-items: center;

		.img_item {
			width: 200rpx;
			margin: 10rpx 20rpx;
		}
	}
}

// .add_btn {
// 	width: calc(100% - 100rpx);
// 	margin: 0 50rpx;
// }

// ::v-deep.uni-section {
// 	width: 100vw;
// }

.select_yes {
	position: fixed;
	height: 70rpx;
	bottom: 40rpx;
	width: calc(100% - 40rpx);
	margin: 0 20rpx;
	border: 1rpx solid deepskyblue;
	background-color: #2280f5;
	color: #fff;
	border-radius: 35rpx;
	// text-align: right;
	// padding-right: 30rpx;
	z-index: 1;
	display: flex;
	align-items: center;

	.select_rest {
		width: 50%;
		height: calc(100% - 2rpx);
		margin: 2rpx 0;
		margin-left: 1rpx;
		background-color: #fff;
		color: #2280f5;
		text-align: center;
		border-radius: 35rpx;
		border-top-right-radius: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
